<template>
  <div>
    <!-- 详情 -->
    <el-steps
      class="w-full"
      :active="statusList.length || 0"
      align-center
      finish-status="success"
    >
      <el-step
        v-for="item in stepList"
        :key="item.id"
        :title="item.desc"
        :description="item.title"
      />
    </el-steps>

    <el-form :model="detail" label-position="top">
      <el-form-item label="设备名称">
        <el-alert :closable="false">
          {{ `${detail.categoryName}_${detail.typeName}` }}
        </el-alert>
      </el-form-item>
      <el-form-item label="设备编号">
        <el-alert :closable="false">
          {{ detail.outCode || "" }}
        </el-alert>
      </el-form-item>
      <el-form-item label="联系人名称">
        <el-alert :closable="false">
          {{ detail.contact || "" }}
        </el-alert>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-alert :closable="false">
          {{ detail.phone || "" }}
        </el-alert>
      </el-form-item>
      <el-form-item label="问题说明">
        <el-alert :closable="false" type="warning">
          {{ detail.content || "" }}
        </el-alert>
      </el-form-item>
      <el-form-item label="问题截图">
        <div class="w-full flex flex-wrap items-center">
          <template v-for="(item, index) in detail.images" :key="index">
            <el-image
              :src="item"
              v-if="item"
              :preview-src-list="[item]"
              class="w-[5rem] h-[5rem] mr-2"
            />
          </template>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { handleApiResponse } from "@/utils/request.js";
import {
  GetAfterSaleDetail,
  GetAfterSaleDetailByAfterSaleId,
} from "../../../../../wailsjs/go/api/OrderApi";

onMounted(() => {
  getDetail();
  getStatus();
});

const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const detail = ref({});
async function getDetail() {
  handleApiResponse(() =>
    GetAfterSaleDetailByAfterSaleId({ orderCode: props.detailForm.orderCode })
  ).then((res) => {
    if (res.code === 0) {
      detail.value = res.data || {};
    }
  });
}

const stepList = ref([
  {
    id: 1,
    title: "",
    desc: "待处理",
  },
  {
    id: 2,
    title: "",
    desc: "处理中",
  },
  {
    id: 4,
    title: "",
    desc: "处理完成",
  },
]);

const statusList = ref([]);
async function getStatus() {
  handleApiResponse(() =>
    GetAfterSaleDetail({ orderCode: props.detailForm.orderCode })
  ).then((res) => {
    if (res.code === 0) {
      statusList.value = res.data.process || [];

      statusList.value.forEach((item) => {
        stepList.value.forEach((item2) => {
          if (item.status == item2.id) {
            item2.title = item.time;
          }
        });
      });
    }
  });
}
</script>

<style scoped lang="scss">
</style>